broadway: Add border node
authorAlexander Larsson <alexl@redhat.com>
Tue, 21 Nov 2017 22:01:00 +0000 (23:01 +0100)
committerAlexander Larsson <alexl@redhat.com>
Thu, 23 Nov 2017 09:48:29 +0000 (10:48 +0100)
gdk/broadway/broadway-protocol.h
gdk/broadway/broadway.js
gdk/broadway/broadwayd.c
gsk/gskbroadwayrenderer.c

index 57b311026f8fdb64c36463275f80b193c766a954..cb2c68f17a23ee39ea4cd9c0c3dc3ac019840649 100644 (file)
@@ -12,6 +12,7 @@ typedef enum { /* Sync changes with broadway.js */
   BROADWAY_NODE_TEXTURE,
   BROADWAY_NODE_CONTAINER,
   BROADWAY_NODE_COLOR,
+  BROADWAY_NODE_BORDER,
 } BroadwayNodeType;
 
 typedef enum {
index 5bf9bfe7433afbd147e3201da429bfa688af9d1f..cbf5b2e9b67a1e8efe69e319b78d667f4533922f 100644 (file)
@@ -293,6 +293,7 @@ function cmdLowerSurface(id)
 
 function SwapNodes(node_data, div) {
     this.node_data = node_data;
+    this.node_data_signed = new Int32Array(node_data);
     this.data_pos = 0;
     this.div = div;
     this.div2 = document.createElement('div');
@@ -324,6 +325,10 @@ SwapNodes.prototype.decode_uint32 = function() {
     return this.node_data[this.data_pos++];
 }
 
+SwapNodes.prototype.decode_int32 = function() {
+    return this.node_data_signed[this.data_pos++];
+}
+
 SwapNodes.prototype.decode_color = function() {
     var rgba = this.decode_uint32();
     a = (rgba >> 24) & 0xff;
@@ -337,6 +342,35 @@ SwapNodes.prototype.decode_color = function() {
     return c
 }
 
+SwapNodes.prototype.decode_float = function() {
+    return this.decode_int32() / 256.0;
+}
+
+SwapNodes.prototype.decode_size = function() {
+    var s = new Object();
+    s.width = this.decode_float ();
+    s.height = this.decode_float ();
+    return s
+}
+
+SwapNodes.prototype.decode_rect = function() {
+    var r = new Object();
+    r.x = this.decode_float ();
+    r.y = this.decode_float ();
+    r.width = this.decode_float ();
+    r.height = this.decode_float ();
+    return r;
+}
+
+SwapNodes.prototype.decode_rounded_rect = function() {
+    var r = new Object();
+    r.bounds = this.decode_rect();
+    r.sizes = []
+    for (var i = 0; i < 4; i++)
+       r.sizes[i] = this.decode_size();
+    return r
+}
+
 SwapNodes.prototype.handle_node = function(parent)
 {
     var type = this.decode_uint32();
@@ -372,8 +406,8 @@ SwapNodes.prototype.handle_node = function(parent)
         var y = this.decode_uint32();
         var width = this.decode_uint32();
         var height = this.decode_uint32();
-       var div = document.createElement('div');
        var c = this.decode_color ()
+       var div = document.createElement('div');
         div.style["position"] = "absolute";
         div.style["left"] = x + "px";
         div.style["top"] = y + "px";
@@ -383,6 +417,36 @@ SwapNodes.prototype.handle_node = function(parent)
         parent.appendChild(div);
         break;
 
+    case 3:  // BORDER
+       var rrect = this.decode_rounded_rect();
+       var border_widths = []
+       for (var i = 0; i < 4; i++)
+           border_widths[i] = this.decode_float();
+       var border_colors = []
+       for (var i = 0; i < 4; i++)
+           border_colors[i] = this.decode_color();
+
+       var div = document.createElement('div');
+        div.style["position"] = "absolute";
+        div.style["left"] = (rrect.bounds.x + border_widths[3]) + "px";
+        div.style["top"] = (rrect.bounds.y + border_widths[0]) + "px";
+        div.style["width"] = (rrect.bounds.width - border_widths[1] - border_widths[3]) + "px";
+        div.style["height"] = (rrect.bounds.height - border_widths[0] - border_widths[2]) + "px";
+       div.style["border-style"] = "solid";
+       div.style["border-top-left-radius"] = rrect.sizes[0].width + "px " + rrect.sizes[0].height + "px"
+       div.style["border-top-right-radius"] = rrect.sizes[1].width + "px " + rrect.sizes[1].height + "px"
+       div.style["border-bottom-right-radius"] = rrect.sizes[2].width + "px " + rrect.sizes[2].height + "px"
+       div.style["border-bottom-left-radius"] = rrect.sizes[3].width + "px " + rrect.sizes[3].height + "px"
+       div.style["border-top-color"] = border_colors[0];
+       div.style["border-top-width"] = border_widths[0] + "px";
+       div.style["border-right-color"] = border_colors[1];
+       div.style["border-right-width"] = border_widths[1] + "px";
+       div.style["border-bottom-color"] = border_colors[2];
+       div.style["border-bottom-width"] = border_widths[2] + "px";
+       div.style["border-left-color"] = border_colors[3];
+       div.style["border-left-width"] = border_widths[3] + "px";
+        parent.appendChild(div);
+        break;
     default:
         alert("Unexpected node type " + type);
     }
index 55a23b3ed0ab5fd69f06902342d8247706d284f1..a26fc5a197fb63489d955e76e1d0e4ff7f0d4a36 100644 (file)
@@ -215,6 +215,13 @@ get_client_serial (BroadwayClient *client, guint32 daemon_serial)
   return client_serial;
 }
 
+#define NODE_SIZE_COLOR 1
+#define NODE_SIZE_FLOAT 1
+#define NODE_SIZE_POINT 2
+#define NODE_SIZE_SIZE 2
+#define NODE_SIZE_RECT (NODE_SIZE_POINT + NODE_SIZE_SIZE)
+#define NODE_SIZE_RRECT (NODE_SIZE_RECT + 4 * NODE_SIZE_SIZE)
+
 static int
 rewrite_node_textures (BroadwayClient *client,
                        int len, guint32 data[], int pos)
@@ -227,7 +234,10 @@ rewrite_node_textures (BroadwayClient *client,
   type = data[pos++];
   switch (type) {
   case BROADWAY_NODE_COLOR:
-    pos += 5;
+    pos += NODE_SIZE_RECT + NODE_SIZE_COLOR;
+    break;
+  case BROADWAY_NODE_BORDER:
+    pos += NODE_SIZE_RRECT + 4 * NODE_SIZE_FLOAT + 4 * NODE_SIZE_COLOR;
     break;
   case BROADWAY_NODE_TEXTURE:
     data[pos+4] = GPOINTER_TO_INT (g_hash_table_lookup (client->textures,
index f22f404aec9fea7a9acc4a1b1ff585fcbdd0322d..926931273c87f26c68031b5dc379979d41b70a39 100644 (file)
@@ -107,6 +107,44 @@ add_rgba (GArray *nodes, const GdkRGBA *rgba)
   g_array_append_val (nodes, c);
 }
 
+static void
+add_float (GArray *nodes, float f)
+{
+  gint32 i = (gint32) (f * 256.0f);
+  guint u = (guint32) i;
+  g_array_append_val (nodes, u);
+}
+
+static void
+add_point (GArray *nodes, const graphene_point_t *point)
+{
+  add_float (nodes, point->x);
+  add_float (nodes, point->y);
+}
+
+static void
+add_size (GArray *nodes, const graphene_size_t *size)
+{
+  add_float (nodes, size->width);
+  add_float (nodes, size->height);
+}
+
+static void
+add_rect (GArray *nodes, const graphene_rect_t *rect)
+{
+  add_point (nodes, &rect->origin);
+  add_size (nodes, &rect->size);
+}
+
+static void
+add_rounded_rect (GArray *nodes, const GskRoundedRect *rrect)
+{
+  int i;
+  add_rect (nodes, &rrect->bounds);
+  for (i = 0; i < 4; i++)
+    add_size (nodes, &rrect->corner[i]);
+}
+
 static void
 gsk_broadway_renderer_add_node (GskRenderer *self,
                                 GArray *nodes,
@@ -139,7 +177,6 @@ gsk_broadway_renderer_add_node (GskRenderer *self,
 
     case GSK_COLOR_NODE:
       {
-
         add_uint32 (nodes, BROADWAY_NODE_COLOR);
         add_uint32 (nodes, x);
         add_uint32 (nodes, y);
@@ -149,6 +186,18 @@ gsk_broadway_renderer_add_node (GskRenderer *self,
       }
       return;
 
+    case GSK_BORDER_NODE:
+      {
+       int i;
+        add_uint32 (nodes, BROADWAY_NODE_BORDER);
+       add_rounded_rect (nodes, gsk_border_node_peek_outline (node));
+       for (i = 0; i < 4; i++)
+         add_float (nodes, gsk_border_node_peek_widths (node)[i]);
+       for (i = 0; i < 4; i++)
+         add_rgba (nodes, &gsk_border_node_peek_colors (node)[i]);
+      }
+      return;
+
     default:
       {
         cairo_surface_t *surface;